<template>
  <div class="main">
    <div  style="width: 100%">
    <h6>*注：系统已将用户已选模型进行性能排序，排名越高，预测误差越小,模型越准确</h6>
      <el-table :data="modeldata">
        <el-table-column prop="id" label="排名"> </el-table-column>
        <el-table-column prop="name" label="模型名称"> </el-table-column>
        <el-table-column prop="accrate" label="预测准确率"> </el-table-column>
      </el-table>      
    </div><br>
    <p1 v-show="next">选择训练模型</p1>
    <p1 v-show="!next">使用{{ mx }}模型进行训练</p1>
    <!-- 二次选择框 -->
    <div style="margin-top: 20px; margin-bottom: 20px" v-show="ifadd">
      <el-select v-model="selectAdd" placeholder="增加训练模型">
        <el-option
          v-for="item in optionsAdd"
          :key="item.value"
          :label="item.label"
          :value="item.value"
          :disabled="item.disabled"
        >
        </el-option>
      </el-select>
      <el-button :loading="loadingAdd" plain class="nextBtn" @click="add()"
        >查询</el-button
      >
    </div>
    <!-- 第一次选择框 -->
    <transition name="el-fade-in-linear">
      <div style="margin-top: 20px" v-show="next">
        <el-select v-model="select" placeholder="请选择">
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
        <el-button plain class="nextBtn" @click="nextBtn()">查询</el-button>
      </div>
    </transition>
    <!-- 查询按钮 -->
    <div class="pbtn_div">
      <div v-show="!next">
        <el-progress
          type="circle"
          :percentage="percentage"
          v-show="!show1"
          :status="show2 ? 'success' : null"
        ></el-progress>
        <el-button
          v-show="show1"
          class="pbtn"
          type="primary"
          icon="el-icon-s-marketing"
          :loading="fakeloading"
          circle
          @click="start()"
        ></el-button>
      </div>
    </div>
    
    <!--echarts的容器-->
    <div
      v-show="show2"
      v-loading="loading"
      id="main"
      style="width: 100%; height: 520px; background: #fff"
    ></div>
  </div>
</template>
 
<script>
import * as echarts from "echarts";
// import { postKeyValueRequest } from "../utils/api";
import axios from "axios";
export default {
  name: "PredictionChartPage",
  data() {
    return {
      charts: "",
      Data1: [], //真实数据
      Data2: [], //数据
      Data3: [], //数据
      Data4: [], //数据
      Data5: [], //数据
      Data6: [], //数据
      hzb: [],
      loading: true,
      loadingAdd: false,
      fakeloading: false,
      next: true,
      show1: true,
      show2: false,
      ifadd: false,
      percentage: 0,
      options: [
        {
          value: "simpleRNN",
        },
        {
          value: "单层LSTM",
        },
        {
          value: "双层LSTM",
        },
        {
          value: "GRU",
        },
        {
          value: "双向RNN",
        },
      ],
      optionsAdd: [
        {
          value: "simpleRNN",
        },
        {
          value: "单层LSTM",
        },
        {
          value: "双层LSTM",
        },
        {
          value: "GRU",
        },
        {
          value: "双向RNN",
        },
      ],
      modeldata:[
        {
          id:"1",
          name:"双层LSTM",
          accrate:"97.54%"
        },
        {
          id:"2",
          name:"GRU",
          accrate:"96.15%"
        },
        {
          id:"3",
          name:"双向RNN",
          accrate:"95.98%"
        },
        {
          id:"4",
          name:"单层LSTM",
          accrate:"95.36%"
        },
        {
          id:"5",
          name:"simpleRNN",
          accrate:"94.32%"
        },
      ],
      select: "",
      selectAdd: "",
      mx: "",
      legend: [],
    };
  },
  //调用
  mounted() {
    this.rawdata();
  },
  methods: {
    rawdata(){
      axios.post("/preWater", { mx: this.select}).then((res) => {
        let data = [];
        let time = [];
        res.forEach((element) => {
          data.push(element.data);
          time.push(element.time);
        });
        this.Data1 = data;
        this.hzb = time;
        this.legend.push("真实数据");
      });
    },
    nextBtn() {
      this.next = false;
      this.mx = this.select;
      this.legend.push(this.mx);
    },
    start() {
      this.fakeloading = true;
      setTimeout(() => {
        this.show1 = false;
        this.pre();
        var sh = setInterval(() => {
          this.percentage = this.percentage + 1;
          if (this.percentage == 100) {
            clearInterval(sh);
            this.show2 = true;
          }
        }, 50);
      }, 1000);
    },
    pre() {
      axios.post("/preWater", { mx: this.select}).then((res) => {
        let data = [];
        let time = [];
        res.forEach((element) => {
          data.push(element.data);
          time.push(element.time);
        });
        this.Data2 = data;
        this.hzb = time;
        this.optionsAdd.forEach((e) => {
          if(!e.value.indexOf(this.select))
          {
            e.disabled = true;
          }
        });
        this.drawLine("main");
      });
    },

    add() {
      this.loadingAdd = true;
      axios.post("/preWater", { 
        mx: this.selectAdd,
      }).then((res) => {
        let data = [];
        res.forEach((element) => {
          data.push(element.data);
        });
        if (this.Data3.length == 0) {
          this.Data3 = data;
        } else if (this.Data4.length == 0) {
          this.Data4 = data;
        } else if (this.Data5.length == 0) {
          this.Data5 = data;
        } else {
          this.Data6 = data;
        }
        this.mx = this.mx + "、" + this.selectAdd;
        this.legend.push(this.selectAdd);
        this.optionsAdd.forEach((e) => {
          if(!e.value.indexOf(this.selectAdd))
          {
            e.disabled = true;
          }
        });
        this.drawLine("main");
      });
    },
    //曲线图
    drawLine(id) {
      this.ifadd = true;
      this.loadingAdd = false;
      this.selectAdd = "";
      this.charts = echarts.init(document.getElementById(id));
      this.charts.setOption({
        xAxis: {
          type: "category",
          data: this.hzb.map(function (str) {
            return str.replace(" ", "\n");
          }),
        },
        yAxis: {
          type: "value",
          interval: 0.5,
        },
        legend: {
          data: this.legend,
        },
        tooltip: {
          trigger: "axis",
        },
        series: [
          {
            name: this.legend[0],
            data: this.Data1,
            type: "line",
          },
          {
            name: this.legend[1],
            data: this.Data2,
            type: "line",
          },
          {
            name: this.legend[2],
            data: this.Data3,
            type: "line",
          },
          {
            name: this.legend[3],
            data: this.Data4,
            type: "line",
          },
          {
            name: this.legend[4],
            data: this.Data5,
            type: "line",
          },
          {
            name: this.legend[5],
            data: this.Data6,
            type: "line",
          },
          {
            name: "",
            type: "line",
            markArea: {
              itemStyle: {
                color: "rgba(255, 173, 177, 0.4)",
              },
              data: [
                [
                  {
                    xAxis: "2022-05-17\n10:00:00",
                  },
                  {
                    xAxis: "2022-05-18\n09:00:00",
                  },
                ],
              ],
            },
          },
        ],
      });
    },
  },
};
</script>
 
<style scoped>
* {
  margin: 0;
  padding: 0;
  list-style: none;
}
.main {
  display: inline;
  width: 100%;
  height: 100%;
}
.main p1 {
  font-size: 29px;
  font-weight: bolder;
  margin-top: 20px;
}
.nextBtn {
  height: 40px;
  width: 60px;
  margin-left: 20px;
}
.select {
  display: flex;
  justify-content: center;
}
.select p {
  font-size: 17px;
  line-height: 40px;
  margin-right: 20px;
}
.select .btn {
  margin-left: 20px;
  height: 40px;
  width: 60px;
}
.pbtn {
  width: 126px;
  height: 126px;
  font-size: 40px;
}
.pbtn_div {
  position: absolute;
  bottom: 30%;
  right: 46%;
  margin: auto;
}
</style>